<template>
  <div class="c-table-column">
    <div class="c-table-column__main-text-wrapper">
      <slot name="mainTextLeft"></slot>

      <slot name="main"></slot>
      <div
        v-if="!$slots.main"
        v-ellTooltip="{ clickHide: true, fetch: true }"
        class="c-table-column__main-text g-flex-side-center"
        :style="textStyle"
      >
        <slot name="mainTextIcon"></slot>
        <CLink v-if="props.isLink" v-ellTooltip="{ clickHide: true }" @click="handleLinkClick">
          {{ empty(props.mainText) }}
        </CLink>
        <template v-else>
          <span v-ellTooltip="{ clickHide: true, fetch: true }">
            {{ empty(props.mainText) }}
          </span>
        </template>
      </div>
      <slot name="mainTextRight"></slot>
    </div>
    <div
      class="c-table-column__sub-text"
      v-ellTooltip="{ clickHide: true }"
      :style="subTextStyle"
      v-if="isShowSubText"
    >
      <slot name="subText">
        {{ empty(props.subText) }}
      </slot>
    </div>
    <slot name="third"></slot>
  </div>
</template>

<script lang="ts">
export default {
  name: 'CTableColumn'
};
</script>
<script lang="ts" setup name="CTableColumn">
import { withDefaults, defineProps, defineEmits, computed } from 'vue';
import { empty } from '@/utils';
import { CLink } from '@/components/CLink/index';

interface CTableColumnProps {
  mainText?: any;
  subText?: any;
  /**
   * main text color
   */
  color?: string;
  /**
   * sub text color
   */
  subTextColor?: string;
  /**
   * sub text 隐藏如果只为空
   */
  subTextHideIfEmpty?: boolean;
  /**
   * 是否是链接
   */
  isLink?: boolean;
}
const props = withDefaults(defineProps<CTableColumnProps>(), {
  isLink: false
});
const emits = defineEmits(['linkClick']);
const textStyle = computed(() => {
  const styles: Record<string, string> = {};
  if (props.color) {
    styles.color = props.color;
  }
  return styles;
});
const subTextStyle = computed(() => {
  const styles: Record<string, string> = {};
  if (props.subTextColor) {
    styles.color = props.subTextColor;
  }
  return styles;
});

/**
 * 是否显示sub text
 */
const isShowSubText = computed(() => {
  return !(props.subTextHideIfEmpty && !props.subText);
});

function handleLinkClick() {
  if (props.isLink) {
    emits('linkClick');
  }
}
</script>

<style lang="scss" scoped>
.c-table-column {
  padding: 5px 0;
  .c-table-column__main-text {
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    color: #435970;
    line-height: 22px;
  }
  .c-table-column__sub-text {
    font-size: 12px;
    font-weight: 400;
    color: #7a8a99;
    line-height: 20px;
  }
  .c-table-column__main-text-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    // .c-table-column__main-text {
    //   flex: 1;
    // }
  }
}
</style>
